iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
0
自我挑戰組

學習 canvas 日記系列 第 8

第 8 天 曲線

  • 分享至 

  • xImage
  •  

畫曲線可以用
arc() 和 arcTo()

ctx.beginPath();
ctx.arc(50, 45, 35, Math.PI*35/180, Math.PI*145/180);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(180,50);
ctx.lineTo(210,50);
ctx.arcTo(240,50,240,60,30);
ctx.lineTo(240,120);
ctx.stroke();  

https://ithelp.ithome.com.tw/upload/images/20181021/20107496qy0Q8nHHkl.jpg

還可用 quadraticCurveTo(cpx, cpy, x, y) 移動控制點產生曲線
這類似 photoshop 的貝茲曲線

ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.quadraticCurveTo(cpx, cpy, x2, y2);
ctx.stroke();

https://ithelp.ithome.com.tw/upload/images/20181021/20107496RB27tZRU9W.jpg
x1, y1 是起點,左上紅點
cpx, cpy 控制點,下方紅點
x2, y2 結束點,右上紅點

以及 bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x2, y2)
和上方的 quadraticCurveTo() 一個控制點不一樣
這可以使用兩個以上的控制點

ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x2, y2);
ctx.stroke();

https://ithelp.ithome.com.tw/upload/images/20181021/20107496zaQ1n5ZvZq.jpg
cpx1, cpy1 第一個控制點 左下紅點
cpx2, cpy2 第2個控制點 右下紅點

若是要2個以上的控制點就在 x2, y2 前再增加 控制點 x, y

ctx.moveTo(20,20);
ctx.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, cpx3, cpy3, x2, y2);
ctx.stroke();

https://ithelp.ithome.com.tw/upload/images/20181021/20107496hBNDQ0c3wE.jpg
起點、終點、前2個控制點相同
bezierCurveTo()
cpx3, cpy3 第3個控制點,上方紅點

感覺上起點和控制點產生的曲線,大約會彎曲在2個點連線線段一半的位置
最後的控制點和結束點所產生的曲線也差不多會在2個點之間一半左右。

上一篇
第 7 天 線的樣式
下一篇
第 9 天 抓取 canvas 標籤的方法
系列文
學習 canvas 日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言